<template>
  <button @click="handleClick" :style="styles">
    <slot></slot>
  </button>
</template>
<script>
export default {
    props: {
        color: {
            type: String,
            default: "#00cc66"
        }
    },
    computed: {
        styles() {
          return {
            background: this.color
          }
        }
    },
    methods:{
      handleClick(e){
        this.$emit('click', e)
      }
    }
};
</script>
<style scoped>
button {
  border: 0;
  outline: none;
  color: #fff;
  padding: 4px 8px;
}
button:active{
  position: relative;
  top: 1px;
  left: 1px;
}
</style>
